<template>
  <el-dialog v-model="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="dataForm" :rules="dataRule" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()" label-width="120px">
      <el-row>
        <el-col :span="24">
          <p class="ptitle-data-from">
            <img src="/form/zidian.png">
            <div style="width: 5px"></div>
            <span>杆塔</span>
          </p>
        </el-col>
        <el-col :span="12">
          <el-form-item label="名称" prop="name">
            <el-input v-model="dataForm.name" placeholder="名称" :maxlength="17"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属线路" prop="deptId">
            <ren-dept-tree style="width: 100%" v-model="dataForm.deptId" :placeholder="$t('dept.title')" v-model:deptName="dataForm.deptName"></ren-dept-tree>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="监测装置编码" prop="cmdId">
            <el-input v-model="dataForm.cmdId" placeholder="" :maxlength="20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="图像装置编码" prop="imageId">
            <el-input v-model="dataForm.imageId" placeholder="" :maxlength="20"></el-input>
          </el-form-item>
        </el-col>
        <!--        <el-col :span="12">-->
        <!--          <el-form-item label="编号" prop="no">-->
        <!--            <el-input v-model="dataForm.no" placeholder="编号" :maxlength="17"></el-input>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <el-col :span="12">
          <el-form-item label="经度">
            <el-input v-model="dataForm.longitude" placeholder="经度" :maxlength="20"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="纬度">
            <el-input v-model="dataForm.latitude" placeholder="纬度" :maxlength="20"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <p class="ptitle-data-from">
            <img src="/form/jiben.png">
            <div style="width: 5px"></div>
            <span>基本信息</span>
          </p>
        </el-col>
        <el-col :span="12">
          <el-form-item label="装置名称" prop="smartEquipName">
            <el-input v-model="dataForm.smartEquipName" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="装置型号" prop="model">
            <el-input v-model="dataForm.model" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="规约版本号" prop="dataTransProtocolVersion">
            <el-input v-model="dataForm.dataTransProtocolVersion" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="版本号" prop="essentialInfoVersion">
            <el-input v-model="dataForm.essentialInfoVersion" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="生产厂家" prop="bsManufacturer">
            <el-input v-model="dataForm.bsManufacturer" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="生产日期" prop="bsProductionDate">
            <el-input v-model="dataForm.bsProductionDate" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出厂编号" prop="bsIdentifier">
            <el-input v-model="dataForm.bsIdentifier" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否在线" prop="isOnline">
            <el-input v-model="dataForm.isOnlinetext" readonly></el-input>
<!--            <ren-select style="width: 100%" v-model="dataForm.is_online" dict-type="is_online" placeholder="类型"></ren-select>-->
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="dataForm.remark" type="textarea" show-word-limit :autosize="{ minRows: 4, maxRows: 4 }" :style="{ width: '100%' }" :maxlength="200"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template v-slot:footer>
      <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t("confirm") }}</el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.el-input.is-disabled .el-input__inner {
  background-color: #caceca;
  /*border-color: #1a47a1;*/
  color: #0a0000;
  cursor: not-allowed;
}
</style>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import baseService from "@/service/baseService";
import { useDebounce } from "@/utils/utils";

const dataForm ={
  id: "",
  deptId: "",
  name: "",
  no: "",
  longitude: "",
  latitude: "",
  cmdId: "",
  imageId: "",
  smartEquipName: "",
  model: "",
  dataTransProtocolVersion: "",
  essentialInfoVersion: "",
  bsManufacturer: "",
  bsProductionDate: "",
  bsIdentifier: "",
  isOnline: "",
  remark: ""
}

export default defineComponent({
  setup() {
    return reactive({
      visible: false,
      dataForm: JSON.parse(JSON.stringify(dataForm)) as any
    });
  },
  computed: {
    dataRule() {
      return {
        deptId: [{ required: true, message: this.$t("validate.required"), trigger: "blur" }],
        name: [{ required: true, message: this.$t("validate.required"), trigger: "blur" }],
        no: [{ required: true, message: this.$t("validate.required"), trigger: "blur" }],
        longitude: [{ required: true, message: this.$t("validate.required"), trigger: "blur" }],
        latitude: [{required: true, message: this.$t("validate.required"), trigger: "blur"}]
        // cmdId: [{ required: true, message: this.$t("validate.required"), trigger: "blur" }],
        // imageId: [{ required: true, message: this.$t("validate.required"), trigger: "blur" }]
      };
    }
  },
  created() {
    this.dataFormSubmitHandle = useDebounce(this.dataFormSubmitHandle);
  },
  methods: {
    init(id: any) {
      this.visible = true;
      this.$nextTick(() => {
        // this.$refs["dataFormRef"].resetFields();
        this.dataForm = JSON.parse(JSON.stringify(dataForm));
        this.dataForm.id = id;
        if (this.dataForm.id) {
          this.getInfo();
        }
      });
    },
    // 获取信息
    getInfo() {
      baseService.get("/KxStation/kxstation/" + this.dataForm.id).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        }
        this.dataForm = res.data;
        // this.dataForm.isOnlinetext = this.getDictLabel('is_online', dataForm.isOnline);
        this.dataForm.isOnlinetext =  this.dataForm.isOnline === "t" ? "在线" : "离线";
        console.log(this.dataForm)
      });
    },
    // 表单提交
    dataFormSubmitHandle() {
      this.$refs["dataFormRef"].validate((valid: boolean) => {
        if (!valid) {
          return false;
        }
        (!this.dataForm.id ? baseService.post : baseService.put)("/KxStation/kxstation", this.dataForm).then((res) => {
          if (res.code !== 0) {
            let msg = res.msg;
            return this.$message({
              dangerouslyUseHTMLString: true,
              message: msg,
              type: "warning"
            });
          }
          this.$message({
            message: this.$t("prompt.success"),
            type: "success",
            duration: 500,
            onClose: () => {
              this.visible = false;
              this.$emit("refreshDataList");
            }
          });
        });
      });
    }
  }
});
</script>
